Ajax submit form without refresh in ModX - is it possible?

Hi there,

I have been trying to develop a simple form using ModX that is able to submit the form without refreshing, such as the following non-modX example:

http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
demo: http://demos.net.tutsplus.com/contactform/

One obstacle that I find is that the above example requires an external file (outside modx) to process the $_POST before dealing with the SQL (INSERT INTO or SELECT FROM). The above sample uses "bin/process.php". Since this is an external file, process.php cannot get the Database Connection from ModX, hence I have to make another connection to the DB to make this work.

Is there a work around for this so that it is either:
1. The external file (process.php) is able to get the DB connection from ModX
or
2. Another method of creating Ajax Submit Form using ModX without any external file.

Please help.
I am looking forward to hearing from you.

Regards,
Ryonn

Hey Ryonn, just create a new resource called 'ajax' and add your 'process.php' code to an uncached snippet on that page. You can then use the MODX api + xPDO to process the form data and do not need to make another DB connection.

Your ajax submit url will be the url for your new 'ajax' resource. Make sense?

Hi Lucas,

Firstly, thanks for the quick reply.
I am still beginner at ModX, so I dont really get what you mean.

I will try to analyze them one by one based on my modx understanding so far, please let me know if there is something thats incorrect.

- just create a new resource called 'ajax'
wont this be ajax.html ?
there are 4 types of resources in modx: document, weblink, symlink, static resource.
Is it static resource?

and add your 'process.php' code to an uncached snippet on that page.
I do not really understand the 'uncached snippet' part.

so is it: I copy-paste the content of process.php into a snippet, then call the snippet in the 'ajax' resource content: [[process]] ?

- You can then use the MODX api + xPDO to process the form data and do not need to make another DB connection.
This part is a total blank for me.
Could you please give me a guide or reference for this?

Thank you again =)

@ryonnsan
I would suggest that to get help you will need to understand MODX terms - try starting here http://modx.com/learn/
To quickly answer your questions:
• you would create resource (document type) the url could be ajax.html but can be what ever you choose/enter - this is assuming you have FURLs turned on
• a snippet is php code that you can call with a modx tag - since you want it to run every time you submit the form you need it to be called uncached - otherwise the modx cache system will remember the first set of results and won't run your php code after that (until the cache is cleared)
• modx api, xPDO - start with the link from above.

I'm not sure these answers will help any until you understand the modx nomenclature and how the bits fit together.

Basically, if you put your AJAX processing code in a snippet, put that snippet in a resource with a blank template, then use the URL of that resource in your AJAX request, the AJAX will behave exactly as if you were using a separate .php file.

The major advantage to this method over using external .php files is two-fold. One, your processor has the same security as the security setting for the page you put the snippet on. Nobody can simply access the .php code directly, thus creating a possible security hole in your site.

The second advantage is that since it's a snippet in a resource, you have access to all of the MODx functions and features, just as any snippet has. Access to the database is automatic, through the connection MODx opened to process the snippet.

Many, if not all, MODx snippets can be used as AJAX processors in this manner; with Evo I've used eForm this way frequently. I'm sure that FormIt could be used in the same manner, although Formit doesn't generate the form it does process the form submission, so I see no reason why it wouldn't work.

Hi Whistle and Susan,

Thanks for the reply. I'll try this first and let you know how it goes

Update:
This works great!!!
Thank you for the help & guidance =D
*cheers*
[ed. note: ryonnsan last edited this post 12 years, 5 months ago.]

@ryonnsan

I am interested in more detail about your implementation as I am trying to do the same basic thing, only with formit. I am newer to modx than you it sounds like. Any help would be fantastically appreciated!

So far I have a form set up and processed with a call to formit (someone else wrote this a year ago), but after reading a few forums on ajax / non-refreshing forms, I feel pretty lost still. I was interested in somehow making a copy of the formit stuff and altering to not refresh the page, but can't even trace the custom parameter "redirectTo" passed to the call, and which I know works if passed a resource id #. When I pass it nothing, it just refreshes the page, which makes sense.

I also created an empty resource that calls a currently empty new snippet where I assume I would somehow call the ajax stuff which may then use, perhaps, one of the formit phps? But I haven't connected this to the rest due to lostness.

Ben [ed. note: suffhort last edited this post 12 years, 2 months ago.]